<template>
  <div class="edit-page">
    <el-row style="height:100%">
      <el-col :span="4"
              class="component-container">
        <v-choose ref="choose" @tapType="tapType"></v-choose>
      </el-col>
      <el-col :span="12"
              class="preview-container">
        <v-preview ref="preview"></v-preview>
      </el-col>
      <el-col :span="8"
              class="setting-container">
        <v-setting></v-setting>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VChoose from '@/components/Choose'
  import VPreview from '@/components/Preview'
  import VSetting from '@/components/Setting'
  import getConfig from '@/core/packages/index.config'

  export default {
    name: 'edit',
    components: {VChoose, VPreview, VSetting},
    data() {
      return {}
    },
    methods: {
      tapType(type) {
        this.$refs.preview.addModule(getConfig(type))
      },
      Test() {


      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .edit-page {
    position: fixed;
    top:70px;
    left: 210px;
    width: 100%;
    height: 100%;
    min-width: 1200px;
  }

  .preview-container,
  .component-container,
  .setting-container {
    height: 100%;
    overflow: auto;
  }

  .preview-container {
    background-color: #f1f1f1;
  }
</style>
